/*
 *这是单独为hello mui准备的个性化css，可以覆盖标准mui的css定义；
 * 在实际项目开发时，建议为App单独写一个css文件，从而实现项目的自定义皮肤功能；
 * 
 * */
.mui-plus header.mui-bar{
	display: none;
}
.mui-plus .mui-bar-nav~.mui-content{
	padding: 0;
}

/*hm开头的表示仅为 Hello MUI示例定义*/
.hm-description{
	margin: .5em 0;
}

.hm-description>li {
	font-size: 14px;
	color: #8f8f94;
}
.flex-container, .flex-container-1 {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	justify-content: space-between;
	text-align: center;
	width:100%;
	margin-top:12px;
}
.flex-container button {
	margin: 1px;
	width:45px;
	height:45px;
	display: inline-block;
	text-align: center;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 25px;
	background-clip: padding-box;
}

.flex-container a {
	color: #8F8F94;
}
.flex-container a.active {
	color: #55aaff;
}
.flex-container-1 {
    margin-bottom: 10px;
    padding-left:10px;
    padding-right:10px;
}
.flex-container-1 button {
	width: 47px;
	height: 47px;
	border: 1px solid #ddd;
	border-radius: 25px;
	background-clip: padding-box;
	padding:8px;
	display: inline-block;
	text-align: center;
}

.flex-container-1 button.fa {
	width:50%;
}

.head-img {
	width: 40px;
	height: 40px;
}

.circle-progress {width: 300px; height: 300px;}

.circle-progress-text {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.circle-progress-value {
	stroke-width: 8px;
	stroke: #2980b9;
}
.circle-progress-circle {
	stroke: white;
	stroke-width: 8px;
	fill: #2c3e50;
	r: 46
}
.circle-progress-text {
	font-size: 30px;
	fill: #ecf0f1;
}

#circle-progress-wrapper > div > div.mui-table-view-cell {
    padding-bottom:8px;
}

input[type=range] {
  -webkit-appearance: none;
  margin: 15px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 8px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 8px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 8px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}
.mui-table-view-cell button.mui-btn {
    width:35px;
    height:35px;
    border-radius: 30px;
}
.dlna-player-info {
    width: 100%;
}
.dlna-player-info div {
    position:relative;
    left:5px;
    top:5px;
}
.dlna-player-info i {
    width:20px;
    color:#8f8f94;
    text-align:center;
}
.dlna-player-info h6 {
    display: inline;
}
.dlna-player-info:after{
    clear:both;
}

.playlist-progress {
    background-repeat: no-repeat;
    height: 2px;
    background-color: #2980b9;
    position: relative;
    bottom: -10px;
}

.playlist-progress-text {
    font-size:0.8em;
    color:grey;
    padding-left: 3px;
}

#dlna-render li.mui-table-view-cell {
    padding-right:15px;
}

#dlna-render li.mui-table-view-cell > div.mui-table {
    vertical-align: middle;
}

#dlna-render .dlna-render-info {
    vertical-align: top;
}
#dlna-render .dlna-render-radio {
    vertical-align: top;
}
#dlna-render .dlna-render-radio div.mui-radio {
    height:100%;
}
#dlna-render .dlna-render-radio > div.mui-radio > label {
    height:42px;
    width:100%;
    text-align:right;
}